<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item prop="fitName">
          <el-input
            v-model="formInline.fitName"
            placeholder="请输入商品名称"
            clearable
            @change="handlergetFitList"
          ></el-input>
        </el-form-item>
        <el-form-item prop="fitModelId">
          <el-select
            v-model="formInline.fitModelId"
            placeholder="请选择商品型号"
            clearable
            @change="handlergetFitList"
          >
            <el-option
              v-for="item in fitModelList"
              :label="item.fitModelName"
              :value="item.fitModelId"
              :key="item.fitModelId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="state">
          <el-select
            v-model="formInline.state"
            placeholder="请选择商品状态"
            clearable
            @change="handlergetFitList"
          >
            <el-option
              v-for="item in fitModelState"
              :label="item.name"
              :value="item.state"
              :key="item.state"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="devModel">
          <el-select
            v-model="formInline.fitModelId"
            placeholder="请选择设备型号"
            clearable
            @change="handlergetFitList"
          >
            <el-option
              v-for="item in ModelList"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="fitModelId">
          <el-date-picker
            v-model="value1"
            class="work_date"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="changeTime"
            ref="referenceRef"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handlergetFitList">查询</el-button>
          <el-button type="success" @click="showfit">添加商品</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="firlist" border style="width: 100%">
        <!-- <el-table-column prop="id" label="日期" width="180"> </el-table-column> -->
        <el-table-column prop="fitName" label="商品名称" width="180">
        </el-table-column>
        <el-table-column prop="fitImg" label="商品缩略图">
          <template slot-scope="scoped">
            <div>
              <viewer>
                <img
                  :src="scoped.row.fitImg"
                  alt=""
                  style="width: 50px; height: 50px"
                />
              </viewer>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="fitImgs" label="商品详细图">
          <template slot-scope="scoped">
            <div>
              <viewer>
                <img
                  v-for="(item, index) in scoped.row.fitImgs"
                  :src="item"
                  :key="index"
                  alt=""
                  style="width: 50px; height: 50px"
                />
              </viewer>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="modellist" label="适用设备">
          <template slot-scope="scoped">
            <div>
              <span v-for="item in scoped.row.modellist">
                {{ item.name }},
              </span>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="state" label="商品状态">
          <template slot-scope="scoped">
            <div>
              <el-tag type="success" v-if="scoped.row.state == 1">启用</el-tag>
              <el-tag type="error" v-else>停用</el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="fitPrice" label="商品价格" width="100">
        </el-table-column>
        <el-table-column prop="fitModelName" label="商品型号">
        </el-table-column>
        <el-table-column prop="add_time" label="添加时间"> </el-table-column>
        <el-table-column prop="update_time" label="更新时间"> </el-table-column>
        <el-table-column label="操作" fixed="right" width="200">
          <template slot-scope="scope">
            <el-link type="primary" size="mini" @click="showEdit(scope.row)"
              >编辑</el-link
            >

            <el-link type="danger" size="mini" @click="handlerDel(scope.row.id)"
              >删除</el-link
            >
            <el-link
              type="success"
              v-if="scope.row.state == 2"
              @click="handlerfitEnDis(scope.row, 1)"
              >启用</el-link
            >
            <el-link
              type="warning"
              v-else
              @click="handlerfitEnDis(scope.row, 2)"
              >停用</el-link
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 商品的弹框 -->
      <el-dialog
        :title="fitname"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="	商品名称" prop="fitName">
            <el-input
              v-model="ruleForm.fitName"
              placeholder="请输入商品名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="	商品价格" prop="fitPrice">
            <el-input
              v-model="ruleForm.fitPrice"
              placeholder="请输入商品价格"
            ></el-input>
          </el-form-item>

          <el-form-item label="商品型号" prop="fitModelId">
            <el-select
              v-model="ruleForm.fitModelId"
              placeholder="请选择商品型号"
              clearable
            >
              <el-option
                v-for="item in fitModelList"
                :label="item.fitModelName"
                :value="item.fitModelId"
                :key="item.fitModelId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="	供应商" prop="supplierId">
            <el-select
              v-model="ruleForm.supplierId"
              placeholder="请选择供应商"
              clearable
            >
              <el-option
                v-for="item in supplierList"
                :label="item.supplierName"
                :value="item.supplierId"
                :key="item.supplierId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="	商品状态" prop="state">
            <el-select
              v-model="ruleForm.state"
              placeholder="请选择商品状态"
              clearable
            >
              <el-option
                v-for="item in fitModelState"
                :label="item.name"
                :value="item.state"
                :key="item.state"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="适用设备" prop="fitPrice">
            <el-select
              v-model="ruleForm.modelId"
              placeholder="请选择适用设备"
              clearable
              @change="handlerSelectModel"
            >
              <el-option
                v-for="item in ModelList"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
            <div class="device_lest">
              <div
                class="device_item"
                v-for="item in labelselect"
                :key="item.id"
              >
                {{ item.name }}
                <span
                  class="el-icon-circle-close device_del"
                  @click="handlerdeviceDEl(item.id)"
                ></span>
              </div>
            </div>
            <!-- <div class="device_lest">
              <div
                v-for="(item, index) in ModelList"
                :key="item.id"
                @click="handlercheck(item.id)"
                :class="
                  labelselect.indexOf(item.id) > -1 ? 'active' : 'device_item'
                "
              >
                {{ item.name }}
              </div>
            </div> -->
          </el-form-item>
          <el-form-item label="	商品缩略图" prop="fitImg">
            <ele-upload-image
              :action="action"
              v-model="ruleForm.fitImg"
              :lazy="true"
              :fileType="['png', 'jpg', 'jpeg']"
              :responseFn="handleResponse"
            ></ele-upload-image>
          </el-form-item>
          <el-form-item label="	商品详细图" prop="fitImgs">
            <ele-upload-image
              :action="action"
              v-model="fitImgs1"
              :lazy="true"
              multiple
              :fileType="['png', 'jpg', 'jpeg']"
              :responseFn="handleResponse1"
            ></ele-upload-image>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handlersure">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="formInline.pageSize"
          :current-page="formInline.pageNumber"
          layout="total, sizes, prev, pager, next, jumper"
          :total="fircount"
          class="management_page"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  getFitList,
  insertFit,
  deleteFit,
  updateFit,
  getFitModelListSim,
  devicModelList,
  getSupplierList,
  fitEnDis
} from "../../utils/api";
export default {
  data() {
    name: "partslist";
    return {
      value1: "",
      formInline: {
        fitName: "",
        fitModelId: "",
        pageNumber: 1,
        pageSize: 10,
        starttime: "",
        endtime: "",
        devModel: "",
        state: ""
      },
      firlist: [],
      fircount: 0,
      fitname: "添加商品",
      dialogVisible: false,
      ruleForm: {
        fitName: "",
        fitImg: "",
        supplierId: "",
        state: "",
        devmodelJson: "",
        fitImgs: [],
        fitId: "",
        fitPrice: "",
        fitModelId: "",
        modelId: ""
      },
      fitImgs1: [],
      action: "https://devicedata.wadd.vip/api/v1.node/uploadImg",
      rules: {
        fitName: [
          { required: true, message: "请输入商品名称", trigger: "blur" }
        ],
        fitImg: [
          { required: true, message: "请上传商品缩略图", trigger: "blur" }
        ],
        fitImgs: [
          { required: true, message: "请上传商品详情图", trigger: "blur" }
        ],
        fitPrice: [
          { required: true, message: "请输入商品价格", trigger: "blur" }
        ],
        fitModelId: [
          { required: true, message: "请选择商品型号", trigger: "blur" }
        ],
        state: [{ required: true, message: "请选择商品状态", trigger: "blur" }],
        supplierId: [
          { required: true, message: "请选择供应商", trigger: "blur" }
        ]
      },
      fitModelList: [],
      ModelList: [],
      supplierList: [],
      // 商品状态数据
      fitModelState: [
        {
          name: "启用",
          state: 1
        },
        {
          name: "停用",
          state: 2
        }
      ],
      currentIndex: false,
      labelselect: [] //选中的设备id
    };
  },
  created() {
    this.handlergetFitList();
    this.handlergetModelList();
    this.handlergetFitModelListSim();
    this.handlergetSupplierList();
  },
  methods: {
    //   获取商品型号数据(下拉使用)
    handlergetFitModelListSim() {
      this.postRequest(getFitModelListSim).then(res => {
        if (res.code == 200) {
          this.fitModelList = res.data;
        }
      });
    },
    // 获取设备类型的数据(下啦)
    handlergetModelList() {
      this.postRequest(devicModelList, {
        modellist: JSON.stringify(this.ruleForm.devmodelJson)
      }).then(res => {
        if (res.code == 200) {
          this.ModelList = res.data;
        }
      });
    },
    // 获取供应商
    handlergetSupplierList() {
      this.postRequest(getSupplierList).then(res => {
        if (res.code == 200) {
          this.supplierList = res.data;
        }
      });
    },
    // 拿到型号
    handlerSelectModel(val) {
      for (var i = 0; i < this.ModelList.length; i++) {
        if (this.ModelList[i].id == val) {
          var a = this.ModelList[i];
          this.ModelList.splice(i, 1);
          this.labelselect.push(a);
        }
      }

      // this.ModelList.filter(item => {
      //   if (item.id == val) {
      //     this.ModelList.splice(item, 1);
      //     this.labelselect.push(item);
      //   }
      // });
      this.ruleForm.modelId = "";
    },
    handlerdeviceDEl(id) {
      this.labelselect.filter((item, index) => {
        if (item.id == id) {
          this.labelselect.splice(index, 1);
          this.ModelList.push(item);
        }
      });
    },

    // 点击开启调用接口
    handlerfitEnDis(row, val) {
      this.postRequest(fitEnDis, {
        fitId: row.id,
        changeState: val
      }).then(res => {
        if (res.code == 200) {
          if (val == 1) {
            this.$message.success("商品配件启用成功");
          } else {
            this.$message.success("商品配件停用成功");
          }
          this.handlergetFitList();
        }
      });
    },
    // handlercheck(index) {
    //   if (this.labelselect.indexOf(index) == -1) {
    //     this.labelselect.push(index); //选中添加到数组里
    //   } else {
    //     this.labelselect.splice(this.labelselect.indexOf(index), 1); //取消
    //   }
    // },
    //   获取商品列表
    handlergetFitList() {
      this.postRequest(getFitList, this.formInline).then(res => {
        if (res.code == 200) {
          this.firlist = res.data.list;
          this.fircount = res.data.count;
        }
      });
    },
    // 显示商品弹框
    showfit() {
      this.fitname = "添加商品";
      this.dialogVisible = !this.dialogVisible;
    },
    // 点击显示编辑商品的弹框
    showEdit(row) {
      this.fitname = "编辑商品";
      this.dialogVisible = !this.dialogVisible;
      this.ruleForm.fitId = row.id;
      this.ruleForm.fitName = row.fitName;
      this.ruleForm.fitModelId = row.fitModelId;
      this.ruleForm.fitPrice = row.fitPrice;
      this.ruleForm.fitImg = row.fitImg;
      this.fitImgs1 = row.fitImgs;
      this.ruleForm.fitImgs = row.fitImgs;
      this.ruleForm.devmodelJson = row.modellist;
      this.ruleForm.supplierId = row.supplierId;
      this.ruleForm.state = row.state;
      this.labelselect = row.modellist;

      this.handlergetModelList();
    },
    // 获取时间
    changeTime(value) {
      if (this.value1 == "" || this.value1 == null || this.value1 == []) {
        this.formInline.starttime = "";
        this.formInline.endtime = "";
        this.handlergetFitList();
      } else {
        this.formInline.starttime = value[0];
        this.formInline.endtime = value[1];
        this.handlergetFitList();
      }
    },
    // 分页
    handleSizeChange(val) {
      this.formInline.pageSize = val;
      this.handlergetFitList();
    },
    handleCurrentChange(val) {
      this.formInline.pageNumber = val;
      this.handlergetFitList();
    },
    handleResponse(response, file, fileList) {
      return (this.ruleForm.fitImg = response.data.src);
    },
    handleResponse1(response, file, fileList) {
      this.fitImgs1.push(response.data.src);
      //   return response.data.src;
      const arr = [];
      this.fitImgs1.forEach(item => {
        if (item != undefined) {
          arr.push(item);
        }
      });
      this.ruleForm.fitImgs = arr;
    },
    handleClose() {
      this.ruleForm.fitId = "";
      this.ruleForm.fitName = "";
      this.ruleForm.fitModelId = "";
      this.ruleForm.fitPrice = "";
      this.ruleForm.fitImg = "";
      this.fitImgs1 = "";
      this.ruleForm.fitImgs = "";
      this.dialogVisible = false;
      this.ruleForm.supplierId = "";
      this.ruleForm.state = "";
      this.ruleForm.devmodelJson = [];
    },
    // 封装一个添加商品型号
    handleradd() {
      if (this.ruleForm.fitPrice < 0) {
        return this.$message.error("商品价格不能为负数哦!");
      }
      this.ruleForm.fitImgs = this.ruleForm.fitImgs.join(",");
      var resule = this.labelselect.map(item => {
        return item.id;
      });
      this.ruleForm.devmodelJson = JSON.stringify(resule);
      this.postRequest(insertFit, this.ruleForm).then(res => {
        if (res.code == 200) {
          this.$message.success("添加商品型号成功");
          this.handleClose();
          this.handlergetFitList();
        }
      });
    },
    // 封装一个编辑商品型号
    handleredit() {
      if (this.ruleForm.fitPrice < 0) {
        return this.$message.error("商品价格不能为负数哦!");
      }
      this.ruleForm.fitImgs = this.ruleForm.fitImgs.join(",");
      var resule = this.labelselect.map(item => {
        return item.id;
      });
      this.ruleForm.devmodelJson = JSON.stringify(resule);
      this.postRequest(updateFit, this.ruleForm).then(res => {
        if (res.code == 200) {
          this.$message.success("编辑商品型号成功");
          this.handleClose();

          this.handlergetFitList();
        }
      });
    },
    handlersure() {
      this.$refs.ruleForm.validate(valid => {
        if (!valid) return this.$message.error("请填写完整");
        if (this.fitname == "添加商品") {
          this.handleradd();
        } else if (this.fitname == "编辑商品") {
          this.handleredit();
        }
      });
    },

    // 点击删除商品
    handlerDel(id) {
      this.$confirm("您确定删除该商品吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.postRequest(deleteFit, { fitId: id }).then(res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.handlergetFitList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style lang="less" scoped>
.device_lest {
  display: flex;
  flex-direction: row;
  margin-top: 30px;
  .device_item {
    background: #2b6cf6;
    color: #ffffff;
    width: 96px;
    height: 38px;
    text-align: center;
    line-height: 38px;
    margin-right: 5px;
    position: relative;
    .device_del {
      cursor: pointer;
      position: absolute;
      top: -2px;
      right: -2px;
      font-size: 16px;
    }
  }
  .active {
    width: 96px;
    height: 38px;
    text-align: center;
    line-height: 38px;
    cursor: pointer;
    margin-right: 5px;
    background: #e6e6e6;
  }
}
</style>
